<template>
    <div class="bg-white goods_create"
        style="min-height: 600px; margin-left: -15px; margin-top:-5px;display: flex; flex-direction: column; margin-bottom: 0!important;">
        <router-link :to="{ path: './list' }" style="position: absolute;top: 12px;left: 200px;">
            <el-button size="mini">回到商品列表</el-button>
        </router-link>

        <el-form label-width="80px" class="text-align-left" style="flex: 1 1 auto;">
            <el-form-item label="商品名称">
                <el-input v-model='form.title' placeholder="请输入不超过11个字符" class="w-50"></el-input>
            </el-form-item>
            <el-form-item label="商品分类">
                <el-select v-model='form.category_id' placeholder="请选择商品分类">
                    <el-option :label="item.name" v-for="(item, index) in cates" :key="index"
                        :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="商品封面">

                <!-- 图片选择 -->
                <div>
                    <!-- 没有头像时显示的 -->
                    <span v-if="!form.cover" class="btn btn-light border" @click="chooseImage">
                        <i class="el-icon-plus"></i>
                    </span>
                    <!-- 有头像时显示的 -->
                    <img v-else :src="form.cover" class="border" style="width:45px;height:45px;cursor:pointer"
                        @click="chooseImage" />
                </div>
            </el-form-item>
            <el-form-item label="商品描述">
                <el-input type="textarea" v-model='form.desc' placeholder="商品描述">
                </el-input>
            </el-form-item>
            <el-form-item label="商品单位">
                <el-input v-model='form.unit' placeholder="请输入不超过11个字符" class="w-50"></el-input>
            </el-form-item>
            <el-form-item label="总库存">
                <el-input placeholder="请输入内容" type="number" v-model='form.stock' class="w-25">
                    <template slot="append">件</template>
                </el-input>
            </el-form-item>
            <el-form-item label="库存预警">
                <el-input placeholder="请输入内容" type="number" v-model='form.min_stock' class="w-25">
                    <template slot="append">件</template>
                </el-input>
            </el-form-item>
            <el-form-item label="最低销售价">
                <el-input placeholder="请输入内容" type="number" v-model='form.min_price' class="w-25">
                    <template slot="append">元</template>
                </el-input>
            </el-form-item>
            <el-form-item label="最低原价">
                <el-input placeholder="请输入内容" type="number" v-model='form.min_oprice' class="w-25">
                    <template slot="append">元</template>
                </el-input>
            </el-form-item>
            <el-form-item label="库存显示">
                <div>
                    <el-radio-group v-model='form.stock_display' role="radiogroup">
                        <el-radio :label="1" border>是</el-radio>
                        <el-radio :label="0" border>否</el-radio>
                    </el-radio-group>
                </div>
            </el-form-item>
            <el-form-item label="是否上架">
                <div>
                    <el-radio-group v-model='form.status' role="radiogroup">
                        <el-radio :label="1" border>放入仓库</el-radio>
                        <el-radio :label="0" border>立即上架</el-radio>
                    </el-radio-group>
                </div>
            </el-form-item>
            <el-form-item label="运费模板">

                <el-select v-model='form.express_id' placeholder="请选择运费模板">
                    <el-option :label="item.name" v-for="(item, index) in express" :key="index"
                        :value="item.id"></el-option>
                </el-select>

            </el-form-item>

        </el-form>
        <el-button text="primary" style="position: fixed; bottom: 50px; right: 50px;" @click="submit">
            发布商品
        </el-button>
    </div>
</template>
<script>
export default {
    name: "createGoods",
    inject: ['app', 'layout'],
    data() {
        return {
            id: 0,
            cates: [],
            express: [],
            form: {
                title: '',
                category_id: '',
                cover: '',
                desc: '',
                unit: '',
                stock: '',
                min_stock: '',
                ischeck: 0,
                status: 0,
                stock_display: 0,
                express_id: '',
                min_price: "",
                min_oprice: '',
            }
        }
    },

    // 测试是否vuex能够访问skus_type
    mounted() {

    },
    created() {
        // 获取id
        // 如果id存在代表是获取修改详情
        // 初始化操作
        this.id = this.$route.params.id
        if (this.id) {
            this.id = this.$route.params.id
            if (this.id) {
                this.layout.showLoading()
                this.$axios.get('/admin/goods/read/' + this.id, { token: true }).then((res) => {
                    // console.log(data);
                    let data = res.data.data
                    this.form = data
                    this.layout.hideLoading()
                }).catch(() => {
                    this.layout.hideLoading()
                })
            }
        }

        this.layout.showLoading()
        this.$axios.get('/admin/goods/create', {
            token: true
        }).then((res) => {
            let data = res.data.data
            this.cates = data.cates
            this.express = data.express.list
            // console.log(res);
            this.layout.hideLoading()


            // console.log('express:', this.express)
        }).catch(() => {
            this.layout.hideLoading()

        })
    },
    methods: {
        // 选择图片
        chooseImage() {
            // 下面的chooseImage是来自于app.vue中的函数
            // 传递max参数为3，即最大选中chooseImage=3
            this.app.chooseImage((res) => {
                // 拿到当前第一个元素的url替换掉上方的span
                // console.log(res[0].url);
                // 修改image值对应到store中的good_create.js中的sku_card.list中的image的值
                this.form.cover = res[0].url
            }, 3);
        },
        onSubmit() {

        },
        submit() {
            this.layout.showLoading()
            let url = this.id ? '/admin/goods/' + this.id : '/admin/goods'
            this.$axios.post(url, this.form, {
                token: true
            }).then(() => {
                this.layout.hideLoading()
                this.$message.success(this.id ? '修改成功' : '发布成功')
                return this.$router.push({
                    name: 'shop-goods-list'
                })

            }).catch(() => {
                this.layout.hideLoading()
            })
        }
    }
}

</script>
<style>
.goods_create .el-form-item {
    margin-bottom: 10px;
}

.goods_create {
    min-height: 600px;
    display: flex;
    flex-direction: column;
    padding-bottom: 50px;
}

/* .goods_create .el-form {
    flex: 1 1 auto;
} */

.goods_create .el-form-item {
    margin-bottom: 10px;
}
</style>